<!-- 贴标签组件 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      centered
      :width="800"
      v-model="visible"
      :bodyStyle="{ paddingTop: '0px' }"
      @ok="handleSubmit"
    >
      <template slot="title">
        <span>{{ title }}</span>
        <span class="fz-14 _pl-10" style="color:#1890ff;">已选用户 ({{ form.appUserInfoIdList.length }}人)</span>
      </template>
      <div class="disFlxJS">
        <div class="fw-6 linh-50">
          全部标签(可多选)<span v-if="form.tagIdList.length" class="fw-4 checked _ml-10"
            >已选 {{ form.tagIdList.length }}个 标签</span
          >
        </div>

        <div><a-button type="primary" size="small" @click="openAddTag">新增标签</a-button></div>
      </div>
      <a-collapse v-model="openTagGroupKey" :bordered="false">
        <template #expandIcon="props">
          <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
        </template>
        <a-collapse-panel
          v-for="(item, index) in tagGroupList"
          :key="index + '_' + item.id"
          :header="item.name"
          class="br-5"
          style="background: #f9f9f9;border-bottom: solid 10px #FFF;"
        >
          <template v-for="tag in item.tagList">
            <a-tag class="_mt-8 _pt-5 _pb-5" :class="{ checked: isChecked(tag) }" :key="tag.id" @click="changeTag(tag)">
              {{ tag.name.length > 8 ? `${tag.name.slice(0, 8)}...` : tag.name }}
            </a-tag>
          </template>
        </a-collapse-panel>
      </a-collapse>
    </a-modal>

    <TagModal ref="TagModal" :groupData="groupData" @refreshTag="addTagSuccess" />
  </div>
</template>

<script>
import { getAllTagGroup, getTagGroupList, batchAssignTag } from '@/api/member/grouping'
import TagModal from '@/views/member/grouping/components/tagModal'
import { intersection } from 'lodash-es'
import { debounce } from '@/utils/common';

export default {
  components: {
    TagModal
  },
  data() {
    return {
      visible: false,
      title: '添加标签',
      openTagGroupKey: [], // 展开的组
      tagGroupList: [],
      form: {
        tagIdList: [], // 标签id列表
        appUserInfoIdList: [], // 用户id列表
        cancelTagIdList: [] // 删除的标签列表
      },
      groupData: []
    }
  },
  methods: {
    // userIds 用户ID数组
    // tagIds 标签ID数组 - 用于回显
    show(userIds, tagIds) {
      this.visible = true
      this.form.appUserInfoIdList = userIds;
      this.form.tagIdList = tagIds;
      console.log(JSON.parse(JSON.stringify(this.form)));
      this.getAllTagList()
    },
    // 获取全部标签
    async getAllTagList() {
      const { data } = await getAllTagGroup()
      // 过滤空标签的组
      this.tagGroupList = data.filter(v => v.tagList && v.tagList.length)
      // 默认全部展开
      this.openTagGroupKey = this.tagGroupList.map((item, index) => index + '_' + item.id)
    },
    // 勾选标签
    changeTag(tag) {
      if (this.form.tagIdList.includes(tag.id)) {
        this.form.tagIdList = this.form.tagIdList.filter(v => v !== tag.id)
        this.form.cancelTagIdList.push(tag.id)
      } else {
        this.form.cancelTagIdList = this.form.cancelTagIdList.filter(v => v !== tag.id)
        this.form.tagIdList.push(tag.id)
      }
    },
    isChecked(tag) {
      return this.form.tagIdList.includes(tag.id)
    },
    // 打开添加标签 0 用户标签 1单位标签
    openAddTag() {
      getTagGroupList({ current: 1, size: 999, type: '0' }).then(res => {
        this.groupData = res.data.records
      })
      this.$refs.TagModal.show('0')
    },
    // 新增标签成功,默认选中
    async addTagSuccess(tag){
      await this.getAllTagList();
      this.form.tagIdList.push(tag.id);
    },
    handleSubmit() {
      debounce(()=>{
        batchAssignTag({ ...this.form, isCheckAll: false }).then(() => {
          this.visible = false
          this.$message.success('操作成功')
          this.$emit('refresh')
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.checked {
  border-color: #1890ff;
  color: #1890ff;
}
</style>
